<template>
    <div class="container">
        <Head></Head>
        <div class="content">
            <mainNav></mainNav>
            <div class="main">
                <Location title='预约管理' msg="待确认"></Location>
                <div class="tableInfo">
                    <div class="confirmBox">
                        <div class="filterBox">
                            <el-tag class="on">全部预约</el-tag>
                            <el-tag>待确认</el-tag>
                            <el-tag>已确认</el-tag>
                            <el-tag>已完成</el-tag>
                            <el-tag>已取消</el-tag>
                        </div>
                        <div class="searchBox">
                            <div class="demo-input-suffix">
                                <span>患者姓名</span>
                                <el-input
                                    placeholder="请输入患者姓名"
                                    v-model="value2">
                                </el-input>
                            </div>
                            <div class="block">
                                <span class="demonstration">预约时间</span>
                                <el-date-picker
                                    type="date"
                                    v-model="value1"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="活动区域">
                                    <el-select v-model="formInline.region" placeholder="活动区域">
                                    <el-option label="上午" value="shanghai"></el-option>
                                    <el-option label="下午" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary">搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <!-- <el-table :data="tableData" border>
                        <el-table-column prop="date" label="姓名" width="220">
                            <template   slot-scope="scope">            
                                <img :src="scope.row.locationImg"  min-width="70" height="70" />
                                <span>{{scope.row.date}}</span>
                            </template>  
                        </el-table-column>
                        <el-table-column prop="name" label="性别" width="129"></el-table-column>
                        <el-table-column label="联系方式" width="264"></el-table-column>
                        <el-table-column label="身份证号码" width="263"></el-table-column>
                        <el-table-column label="预约时间" width="263"></el-table-column>
                        <el-table-column label="预约医生" width="241"></el-table-column> 
                        <el-table-column prop="city" label="预约状态" width="242">
                             <template slot-scope="scope">
                                    <el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData[scope.$index])"
                                    type="text"
                                    size="small">
                                    待确认
                                    </el-button>
                            </template>
                        </el-table-column>
                    </el-table> -->
                    <el-table
                        :data="tableData"
                        size="small"
                        >
                        <el-table-column
                        prop="date"
                        label="姓名"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="性别"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="province"
                        label="联系方式"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="city"
                        label="身份证号"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="预约时间"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="zip"
                        label="预约医生"
                       >
                        </el-table-column>
                        <el-table-column
                            label="预约状态"
                           >
                            <template slot-scope="scope">
                                <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                type="text"
                                size="small">
                                待确认
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <Pagination></Pagination>                
                <Footer></Footer>
            </div>
        </div>
        <el-dialog
            title="待确认-调整预约时间"
            :visible.sync="dialogVisible"
            width="30%"
            :show-close="false">
           <ul class="dialogInfo">
               <li><span>姓名</span><span>靖乐茜</span> </li>
               <li><span>性别</span><span>男</span> </li>
               <li><span>联系方式</span><span>19844000090</span> </li>
               <li><span>身份证号</span><span>41022419900617321X</span> </li>
               <li><span>预约时间</span><span>2019-12-4  下午4：30</span> </li>
               <li><span>预约医生</span><span>温毓</span> </li>
               <li><span>挂号费</span><span>¥5.5</span> </li>
               <li><span>调整预约时间为</span>  
                    <el-time-picker
                        v-model="value1"
                        placeholder="任意时间点">
                    </el-time-picker>
                </li>
           </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import Head from "@/components/head";
    import  MainNav from "@/components/mainNav";
    import  Footer from "@/components/footer";
    import  Location from "@/components/location";
    import  Pagination from "@/components/pagination";
   export default {
        name: 'Appointment',
        components: {
           Head,
           Location,
           MainNav,
           Pagination,
           Footer
        },
        data(){
            return{
                value1: '',
                value2: '',
                formInline: {
                user: '',
                region: ''
                },
                 value1: new Date(2016, 9, 10, 18, 40),
                dialogVisible:false,
               tableData: [
                   {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                     locationImg:require('@/assets/location.png'),
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                     locationImg:require('@/assets/location.png'),
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }
                    ,
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王大虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王大虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }                       
                    ]
            }
        },
        methods:{
          deleteRow(index,item){
              this.dialogVisible=true;
          }
          
        }
    }
</script>
<style lang="stylus">
  
</style>